<template>
  <div class="vue-app" style="position: relative;width: 100%" id="searchResult">
    <!--头部-->
    <div id="fixedPart" style="position: absolute;width: 100%;z-index: 10">
      <header class="customHeaderStyle">
        <div class="go-back" @click="$router.go(-1)">
          <i></i>
          <i></i>
          <i></i>
        </div>
        <div class="commodity_search search_result">
          <div class="aui-searchbar-input" @click="$router.go(-1)">
            <i class="icon njfont nj-sousuo"></i>
            <input type="search" :placeholder="keyword.replace(/^keyword=/g,'')" id="search-input">
            <div class="aui-searchbar-clear-btn"> 
              <i class="aui-iconfont aui-icon-close"></i>
            </div>
          </div>
        </div>
        <CartShowNum style="top: 0.5rem"></CartShowNum>
        <!-- <shopping-cart style="margin-top: 0.5rem"></shopping-cart> -->
      </header>
      <!--头部-->
      <!-- <div style="height:5.1rem;"></div> -->
      <!--排序-->
      <OrderHeader></OrderHeader>
    </div>

    <!--商品列表-->
    <div style="padding-top: 5.2rem; height:100%;overflow: hidden;" ref="listContainer">

      <vertical-scroll ref="verticalScroll" @scrollBottom="loadMore" :bottomPos="20">
        <ul style="width:100%" class="aui-list aui-media-list wares_list" ref="blocker">
          <commodity-list v-if="resultData && resultData.length > 0" v-for="item in resultData" :key="item.goodsid"
                          :comInfor="translateDetailData(item)">
          </commodity-list>
          <div v-if="noData" class="noData">
            <img src="static/image/no_data.png" alt="/">
            <p>暂无相关数据</p>
          </div>
        </ul>
        <!--版权信息-->
        <div class="copyright" v-show = "showCopyRight">
          <p>Copyright&copy;2017-2018 All Rights Reserved.</p>
          <p>南宁翌然网络科技有限公司</p>
        </div>
        <!--版权信息 end-->
      </vertical-scroll>
    </div>
    <div v-if="isShowLoadMore"
          style="color:#444444 ;height:2rem!important;  width: 100%;text-align: center;  line-height: 2rem;vertical-align: middle ; background:white"
          @click.self="changeFloat">
      <LoadMoreAnimate></LoadMoreAnimate>
      正在加载...
    </div>
    <add-cart-animate @refresh="refresh"></add-cart-animate>
  </div>
</template>

<script>
  import commodityList from "../../real-components/CommodityList"
  import VerticalScroll from "@/real-components/VerticalScroll"
  import axios from "axios";
  import {mapState, mapGetters, mapMutations} from 'vuex';
  import {translateDetailData} from "../../utils/TranslateDetailDate"
  import AddCartAnimate from '@/real-components/AddCartAnimate'
  import CartShowNum from "../../real-components/CartShowNum";
  import OrderHeader from "../../real-components/OrderHeader";
  import LoadMoreAnimate from '@/real-components/LoadMoreAnimate'
  export default {
    data () {
      return {
        keyword: null,
        resultData: null,
        activeOrder: 0,
        orderPrice: 1,
        orderSell: 3,
        orderSave: 5,
        noData: false,
        pageNum: 1,
        sortCondType: "",
        sortCondOrder: "",
        totalCount: 0,
        showCopyRight: false,
        isShowLoadMore: false,
        loading: false
      }
    },
    components: {
      commodityList,
      CartShowNum,
      AddCartAnimate,
      VerticalScroll,
      OrderHeader,
      LoadMoreAnimate
    },
    computed: {
      //展示数据将返回数据 按照规则排序
      showData () {
        var showData = this.resultData
        if (showData && showData.length > 0) {
          switch (this.activeOrder) {
            case 0:
              showData.sort(function (a, b) {
                return b.goodsid - a.goodsid
              });
              break;
            case 1:
              showData.sort(function (a, b) {
                return a.wsprice - b.wsprice
              });
              break;
            case 2:
              showData.sort(function (a, b) {
                return b.wsprice - a.wsprice
              });
              break;
            case 3:
              showData.sort(function (a, b) {
                var sell = a.sell ? "sell" : "wsprice"
                return b[sell] - a[sell]
              });
              break;
            case 4:
              showData.sort(function (a, b) {
                var sell = a.sell ? "sell" : "wsprice"
                return a[sell] - b[sell]
              });
              break;

              //改到这里
            default:
              break;
          }
          return showData
        } else {
          return null
        }
      },
      getSortInfo(){
        return this.$store.state.cjy.orderConfig;
      }
    },
    created(){
      // this.CHANGE_ORDER_CONFIG();
    },
    methods: {
      ...mapMutations('cjy',[
        'CHANGE_ORDER_CONFIG'
      ]),
      getRes(){
        this.pageNum = 1;
        this.saveRecord();
        this.sortCondType = this.$store.state.cjy.orderConfig.type;
        this.sortCondOrder = this.$store.state.cjy.orderConfig.order == "down" ? 2 : 1;
        let options = {
          method: "post",
          url: api.goods_host + "/mallGoods/queryMallGoodsList",
          data: {
            usePlatform: "wap",
            storeCode: localStorage.getItem("storeCode"),
            enterpriseCode: api.enterpriseCode,
            goodsname: this.keyword,
            [this.sortCondType]: this.sortCondOrder,
            isPage: true,
            pageNum: this.pageNum,
            length: 5,
          },
          headers: {
            sessionId: localStorage.getItem("sessionId"),
          }
        };
        axios(options).then((data) => {
            var data = data.data;
            this.resultData = data.data[0].results;
            this.totalCount = data.data[0].totalCount;
            data.data[0].results.length < data.data[0].totalCount ? this.showCopyRight = false : this.showCopyRight = true;
            data.data[0].results.length === 0 ? this.noData = true : this.noData = false;
            this.pageNum = 2;
        })
        setTimeout(() => {
          this.refresh()
        }, 200)
      },
      refresh () {
        this.$refs.verticalScroll.refresh()
      },
      //数据转化
      translateDetailData,
      saveRecord (count = 8) {
        let searchWord = this.keyword;
        var localSearchData = JSON.parse(localStorage.getItem('njsearchHistory'))
        if (searchWord) {
          if (localSearchData) {
            var index = localSearchData.indexOf(searchWord)
            //   历史记录去重
            if (index != -1) {
              localSearchData.splice(index, 1)
            }
            localSearchData.unshift(searchWord)
            //限制历史搜索长度
            if (localSearchData.length > count) {
              //当超出规定长度将被删除
              localSearchData.pop()
            }
            localStorage.setItem('njsearchHistory', JSON.stringify(localSearchData))
          }
          else {
            localStorage.setItem('njsearchHistory', JSON.stringify([searchWord]))
          }
        }
      },
      //跳转到搜索页
      goToSearchBar () {
        this.$router.push("/searcher");
      },
      check(){
      },
      loadMore(){
        if(this.resultData.length < this.totalCount){
          this.isShowLoadMore = true;
          if(!this.loading){
            this.loading = true;
            let options = {
              method: "post",
              url: api.goods_host + "/mallGoods/queryMallGoodsList",
              data: {
                usePlatform: "wap",
                storeCode: localStorage.getItem("storeCode"),
                enterpriseCode: api.enterpriseCode,
                goodsname: this.keyword,
                [this.sortCondType]: this.sortCondOrder,
                isPage: true,
                pageNum: this.pageNum,
                length: 5,
              },
              headers: {
                sessionId: localStorage.getItem("sessionId"),
              }
            };
            axios(options).then((data) => {
              this.isShowLoadMore = false;
              this.loading = false;
              var data = data.data;
              this.resultData = this.resultData.concat(data.data[0].results);
              this.resultData.length < data.data[0].totalCount ? this.showCopyRight = false : this.showCopyRight = true;
              this.pageNum++;
            })
          }
        }else{

        }
      },
      sortedGoods(){
        this.pageNum = 1;
        let options = {
          method: "post",
          url: api.goods_host + "/mallGoods/queryMallGoodsList",
          data: {
            usePlatform: "wap",
            storeCode: localStorage.getItem("storeCode"),
            enterpriseCode: api.enterpriseCode,
            goodsname: this.keyword,
            [this.sortCondType]: this.sortCondOrder,
            isPage: true,
            pageNum: this.pageNum,
            length: 5,
          },
          headers: {
            sessionId: localStorage.getItem("sessionId"),
          }
        };
        axios(options).then((data) => {
          var data = data.data;
          this.resultData = data.data[0].results;
          this.totalCount = data.data[0].totalCount;
          data.data[0].results.length < data.data[0].totalCount ? this.showCopyRight = false : this.showCopyRight = true;
          data.data[0].results.length === 0 ? this.noData = true : this.noData = false;
          this.pageNum = 2;
        })
      }
    },
    created () {
      this.keyword = this.$route.query.clue;
      console.log(this.keyword,"clue");
    },
    beforeDestory(){

    },
    mounted () {
      this.getRes();
      this.$refs.blocker.style.minHeight = document.documentElement.clientHeight - 190 + 'px';
    },
    watch:{
      getSortInfo(newVal){
        this.sortCondType = this.$store.state.cjy.orderConfig.type;
        this.sortCondOrder = this.$store.state.cjy.orderConfig.order == "down" ? 2 : 1;
        this.sortedGoods();
      }
    }
  }
</script>

<style scoped>
.customHeaderStyle{
		position: relative;
		background: #fff;
		min-height: 3rem;
		border-bottom: 1px solid #eaeaea;
		color: #444;
		font-weight: 700;
		left: 0;
		top: 0;
		line-height: 2.25rem;
		/* z-index: 2; */
		width: 100%;
		font-size: .9rem;
		text-align: center;
		margin: 0;
		padding: 0;
	}
	.headerCustomTitle{
		overflow: hidden;
		right: 6rem;
		font-weight: 500;
		min-height: 2.25rem;
		position: absolute;
		margin: 0;
		text-align: left;
		white-space: nowrap;
		left: 3rem;
		width: auto;
		text-overflow: ellipsis;
		z-index: 2;
		font-size: 1.1rem;
		margin-top: .35rem;
		top: 1px;
	}
  .aui-col-xs-4 {
    font-size: 0.7rem;
    width: 25%;
  }

  #cartIcon {
    right: .75rem;
  }

  .aui-searchbar, .aui-bar-nav {
    position: static;
  }

  .search_tab {
    position: static;
  }

  .noData {
    width: 100%;
    text-align: center;
  }

  .noData > img {
    width: 11rem;
    margin: 0 auto;
  }

  #searchResult {
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    flex-direction: column;
  }

  #fixedPart {
    flex: 1
  }
</style>

